<template lang="html">
  <div class="loginbox">
    <div class="logo">
      <img src="../../assets/login-logo.png" alt="">
    </div>
    <div class="login-wrap">
          <div class="ms-login">
            <el-form :model="ruleForm" :rules="rules" ref="Form" label-width="0px" class="demo-ruleForm">
              <el-form-item prop="username">
                <el-input inline-message="true" v-model="ruleForm.username" placeholder="username"></el-input>
              </el-form-item>
              <el-form-item prop="passwod">
                <el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
              </el-form-item>
              <div class="login-btn">
                <el-button  type="primary" @click="submitForm('Form')">登录</el-button>
              </div>
              <p style="font-size:12px;line-height:30px;color:#999;">Tips : 用户名和密码随便填。</p>
            </el-form>
          </div>
    </div>
  </div>
</template>

<script>
export default{
  data: function(){
      return {
          ruleForm: {
              username: '',
              password: ''
          },
          rules: {
              username: [
                  { required: true, message: '请输入用户名', trigger: 'blur' },
                  {min:3,max:5,message:"长度在3-5之间"}
              ],
              password: [
                  { required: true, message: '请输入密码', trigger: 'blur' }
              ]
          }
      }
  },
  methods: {
      submitForm(formName) {
          const self = this;
          self.$refs[formName].validate(function(valid){
            if (valid) {
              localStorage.setItem('ms_username',self.ruleForm.username);
              self.$router.push('/index');
            } else {
              console.log('error submit!!');
              return false
            }
          })
      },
      test(){
        console.log(this.ruleForm.username)
        console.log(this.ruleForm.password)
      }
  }
}
</script>

<style lang="css" scoped>
  .loginbox{
    background-color: rgb(38, 37, 40);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height:100%;
  }
  .logo{
    margin-top:-140px;
    width:100%;
    height:90px;
  }
  .logo img{
    width:400px
  }
  .ms-title{
    font-size: 30px;
    color:rgb(59, 163, 247);
  }
  .login-wrap{
    border-radius: 6px;
    padding:20px;
    background-color: white;
    box-shadow: 0 0 15px rgb(59, 125, 255);
  }
  .ms-login{
    margin:0 auto;
    width:20%;
    min-width:400px;
  }
  .login-btn button{
    width:100%;
    height:50px;
  }
</style>
